<template>
  <div class="container">
    <div class="header">
      <img :src="sellerInfo.header_image" alt="">
    </div>
    <div class="title">
      {{sellerInfo.title}}
    </div>
    <div v-for="(item,index) in sellerInfo.brand_intros" :key="index" class="desc">
      <div v-if="isShow"> {{item.brief}}</div>
      <div v-else> {{item.brief | fontNumber}}</div>
    </div>
    <div v-if="sellerInfo.header_image" class="showPin" @click="showPin">{{pinTxt}}</div>
  </div>
</template>
<script>
export default {
  name: 'business',
  data () {
    return {
      sellerInfo: [],
      isShow: false,
      pinTxt: '查看品牌故事'
    }
  },
  created () {
    this.getData()
  },
  computed: {
  },
  methods: {
    getData () {
      this.$axios("/api/profile/seller").then(res => {
        // console.log(res.data);
        this.sellerInfo = res.data;
      });
    },
    showPin () {
      this.isShow =! this.isShow
      if(this.isShow){
        this.pinTxt = '收起'
      }else{
        this.pinTxt = '查看品牌故事'
      }
    }
  },
  filters: {
    fontNumber (date) {
      const length = date.length
      if (length > 8) {
        var str = ''
        str = date.substring(0, 60) + '...'
        return str
      } else {
        return date
      }
    }
  },
}
</script>
<style  scoped>
.container {
  min-height: 50vh;
  background-color: #fff;
}
.header {
  text-align: center;
}
.header img {
  width: 90%;
  background-color: #fff;
  padding: 0.3rem 0;
}
.title {
  font-size: 0.4rem;
  font-weight: bold;
  padding-left: 0.4rem;
}
.desc {
  padding: 0.4rem;
  color: rgb(87, 85, 85);
  line-height: 0.5rem;
}
.showPin {
  text-align: center;
  color: rgb(84, 84, 84);
  padding-bottom: .5rem;
}
</style>
